<template>
  <div>
    <div class="leixing">
      <p class="title"><slot></slot></p>
      <div class="tags" @click="changeFn">
        <span
        class="tag-nav "
        v-for="item in arr"
        :key="item.value"
        :class="{active:toggel}"
         @click="choiceTagsFn(item.value)"
         >{{
          item.label
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    arr: []
  },
  data () {
    return {
      isEdit: false,
      toggel: false
    }
  },
  methods: {
    choiceTagsFn (val) {
      // this.toggel = !this.toggel
      console.log(val)
    },
    changeFn (e) {
      // console.log(e.target)
      e.target.classList.toggle('active')
    }
  }
}
</script>

<style lang="less" scoped>
.leixing {
  width: 100%;
  border-bottom: 1px solid #999;
  box-sizing: border-box;
  .title {
    width: 100%;
    margin: 20px 0;
    color: #333;
    font-size: 15px;
  }
  .tags {
    margin-left: 40px;
    padding-bottom: 14px;
    .tag-nav {
      display: inline-block;
      width: 70px;
      height: 32px;
      line-height: 32px;
      margin: 0 18px 15px 0;
      font-size: 12px;
      color: #888;
      text-align: center;
      border: 1px solid #d2d2d2;
    }
    .active {
      color: #1cb676;
      background-color: #7df9d7;
    }
  }
}
</style>
